<template>
  <div class="continua">
    <div class="content">
      <h3>我是父组件App</h3>
      <p>我是父亲，我现在的资产有：{{ money }}</p>
      <button @click="borrowByChild">向儿子借10元</button>
      <hr/>
      <Children ref="son"/>
    </div>
  </div>
</template>

<script setup>
// 在vue3中没有$children,但是在模块中有$parent.
// $parent可以获取某一个组件的父组件实例VC,因此可以使用父组件内部的数据与方法。
// 必须子组件内部拥有一个按钮点击时候获取父组件实例，当然父组件的数据与方法需要通过defineExpose方法对外暴露
import {ref} from "vue";
import Children from "@/components/05组件通讯/05- ref与$parent/children.vue";

const money = ref(200);
const son = ref();
const borrowByChild = function () {
// 让儿子的资产减少10元
  son.value.money -= 10;
// 老子的资产资产加10元
  money.value += 10;
}
defineExpose({money})
</script>

<style scoped lang="less">
.continua {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  .content {
    width: 500px;
    height: 500px;
    border: 1px solid #ccc;
  }
}
</style>
